<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<link rel="stylesheet"
      th:href="@{/css/login.css}"/>
<link rel="stylesheet"
      th:href="@{/css/reset.css}" />
<link rel="icon" href="img/ico.ico">
<link rel="stylesheet" href="/css/public.css" th:href="@{/css/public.css}" media="all"/>
<link rel="stylesheet" href="/layui/css/layui.css">
<body onkeydown="keyLogin();">
<div id="particles-js">
    <div class="login">
        <div class="login-top">学生宿舍管理系统</div>
        <p style="color:red;font-size:18px;text-align:center;" th:text="${message}"></p>
        <div class="login-center clearfix">
            <div class="login-center-img">
                <img th:src="@{/images/name.png}" />
            </div>
            <div class="login-center-input">
                <!--/*@thymesVar id="loginName" type=""*/-->
                <input type="text" id="adminName" name="" placeholder="请输入您的用户名"
                       onfocus="this.placeholder=''" th:value="${loginName}" onblur="this.placeholder='请输入您的用户名'" />
                <div class="login-center-input-text">用户名</div>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img">
                <img th:src="@{/images/password.png}" />
            </div>
            <div class="login-center-input">
                <input type="password" id="password" name=""placeholder="请输入您的密码"
                       onfocus="this.placeholder=''" th:value="${password}" onblur="this.placeholder='请输入您的密码'" />
                <div class="login-center-input-text">密码</div>
            </div>
        </div>
        <!--<div class="login-center clearfix">-->
            <!--<div class="login-center-img">-->
                <!--<img th:src="@{/images/password.png}" />-->
            <!--</div>-->
            <!--<div class="login-center-input" id="imgCode">-->
                <!--<input type="text" placeholder="请输入验证码" id="code" name="code"-->
                       <!--onfocus="this.placeholder=''" th:value="${code}" onblur="this.placeholder='请输入验证码'">-->
                <!--<div class="login-center-input-text">密码</div>-->
                <!--<img th:src="@{/home/getCode}"  src="/home/getCode" onclick="changeCode()" id="codeImg">-->
            <!--</div>-->
        <!--</div>-->
        <div class="login-center clearfix">
        <div class="loginBody">
            <div class="layui-form-item input-item" id="imgCode">
                <label for="code">验证码</label>
                <input type="text" placeholder="请输入验证码" autocomplete="off" id="code" name="code"  class="layui-input">
                <img th:src="@{/home/getCode}"  src="/home/getCode" onclick="changeCode()" id="codeImg">
            </div>
        </div>
        </div>
        <div class="login-button" id="login_button">登录</div>
    </div>

    <div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="/layui/layui.js"></script>
<script src="/js/particles.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/app.js"></script>
<script type="text/javascript">
    /**
     *捕获enter键盘事件绑定到登录按钮
     */
    function keyLogin() {
        if (event.keyCode == 13) {
            document.getElementById("login_button").click();
        }
    }

    //随机生成验证码
     function changeCode(){
        //重新请求验证码后台，加载图片标签
        $("#codeImg").attr("src","/home/getCode?time="+new Date().getTime())
    }
    //表单输入效果
    $(".loginBody .input-item").click(function (e) {
        e.stopPropagation();
        $(this).addClass("layui-input-focus").find(".layui-input").focus();
    })
    $(".loginBody .layui-form-item .layui-input").focus(function () {
        $(this).parent().addClass("layui-input-focus");
    })
    $(".loginBody .layui-form-item .layui-input").blur(function () {
        $(this).parent().removeClass("layui-input-focus");
        if ($(this).val() != '') {
            $(this).parent().addClass("layui-input-active");
        } else {
            $(this).parent().removeClass("layui-input-active");
        }
    })
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0)
            return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' '
                + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '')
                + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }
    document.querySelector(".login-button").onclick = function() {

        addClass(document.querySelector(".login"), "active")
        setTimeout(
            function() {
                addClass(document.querySelector(".sk-rotating-plane"),
                    "active")
                document.querySelector(".login").style.display = "none"
            }, 800)
        setTimeout(function() {
            removeClass(document.querySelector(".login"), "active")
            removeClass(document.querySelector(".sk-rotating-plane"),
                "active")
            document.querySelector(".login").style.display = "block"
            //获得用户名和密码
            var loginName=document.getElementById("adminName").value;
            var password=document.getElementById("password").value;
            var code=document.getElementById("code").value;
            window.location.href="/home/user_login?login_name="+loginName+"&password="+password+"&code="+code;

        }, 2000)
    }
</script>
<div style="text-align: center;"/>
</body>
</html>